<div class="row clearfix" [@SimpleAnimate]="'fadeIn'">
    <div class="col-md-12 column">
        <div class="box-inner">
            <div class="well box-header tool_bar_header" style="padding-top: 5px">
                <button (click)="back()" type="button" class="btn btn-sm btn-default">
                    <i class="glyphicon glyphicon-share">返回</i>
                </button>
                <button (click)="add()" type="button" class="btn btn-sm btn-default">
                    <i class="glyphicon glyphicon-edit">添加</i>
                </button>
                <button (click)="save()" type="button" class="btn btn-sm btn-success">
                    <i class="glyphicon glyphicon-save">保存</i>
                </button>
            </div>
            <div class="box-content">
                <form role="form">
                    <div class="container">
                        <div class="row clearfix">
                            <div class="col-md-4 column">
                                <div class="form-group">
                                    <label>普通文本输入框</label>
                                    <input class="form-control" [(ngModel)]="goodsInfo.goodsName" name="goodsInfo.goodsName" placeholder="" type="text" required>
                                </div>
                            </div>
                            <div class="col-md-4 column">
                                <div class="form-group">
                                    <label>数字输入框</label>
                                    <input class="form-control" [(ngModel)]="goodsInfo.batchNumber" name="goodsInfo.batchNumber" placeholder="" type="number"
                                        required>
                                </div>
                            </div>
                        </div>
                        <div class="row clearfix">
                            <div class="col-md-8 column">
                                <div class="form-group">
                                    <label>数字输入框</label>
                                    <alert type="success">
                                        <strong>Well done!</strong> You successfully read this important alert message.
                                    </alert>
                                    <alert type="info">
                                        <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
                                    </alert>
                                    <alert type="warning">
                                        <strong>Warning!</strong> Better check yourself, you're not looking too good.
                                    </alert>
                                    <alert type="danger">
                                        <strong>Oh snap!</strong> Change a few things up and try submitting again.
                                    </alert>
                                </div>
                            </div>
                        </div>
                        <div class="row clearfix">
                            <div class="col-md-4 column">
                                <div class="form-group">
                                    <label>日期组件1</label>
                                    <app-date [placeholder]="'日期'" [dataModel]="expirationDate"></app-date>
                                </div>
                            </div>
                        </div>
                        <div class="row clearfix">
                            <div class="col-md-4 column">
                                <div class="form-group">
                                    <label>日期组件2: bootstrap</label>
                                    <input type="text" class="form-control" [minDate]="minDate" [maxDate]="maxDate" #dp="bsDatepicker" bsDatepicker [(bsValue)]="bsValue"
                                        [(bsConfig)]="bsConfig">
                                </div>
                            </div>
                        </div>
                        <div class="row clearfix">
                            <div class="col-md-4 column">
                                <div class="form-group">
                                    <label>日期组件3: bootstrap</label>
                                    <input [(ngModel)]="bsRangeValue" name="bsRangeValue" class="form-control" #drp="bsDaterangepicker" bsDaterangepicker>
                                </div>
                            </div>
                        </div>
                        <div class="row clearfix">
                            <div class="col-md-4 column">
                                <div class="form-group">
                                    <label>日期组件3: material</label>
                                    <mat-form-field>
                                        <input matInput [matDatepicker]="picker" placeholder="Choose a date">
                                        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                                        <mat-datepicker #picker></mat-datepicker>
                                    </mat-form-field>
                                </div>
                            </div>
                        </div>
                        <div class="row clearfix">
                            <div class="form-group">
                                <label>按钮</label>
                                <div class="col-md-12 column">
                                    <h3>Basic Buttons</h3>
                                    <div class="button-row">
                                        <button mat-button>Basic</button>
                                        <button mat-button color="primary">Primary</button>
                                        <button mat-button color="accent">Accent</button>
                                        <button mat-button color="warn">Warn</button>
                                        <button mat-button disabled>Disabled</button>
                                        <a mat-button routerLink=".">Link</a>
                                    </div>
                                </div>
                                <div class="col-md-12 column">
                                    <h3>Raised Buttons</h3>
                                    <div class="button-row">
                                        <button mat-raised-button>Basic</button>
                                        <button mat-raised-button color="primary">Primary</button>
                                        <button mat-raised-button color="accent">Accent</button>
                                        <button mat-raised-button color="warn">Warn</button>
                                        <button mat-raised-button disabled>Disabled</button>
                                        <a mat-raised-button routerLink=".">Link</a>
                                    </div>
                                </div>
                                <div class="col-md-12 column">
                                    <h3>Icon Buttons</h3>
                                    <div class="button-row">
                                        <button mat-icon-button>
                                            <span class=" glyphicon glyphicon-heart"></span>
                                        </button>
                                        <button mat-icon-button color="primary">
                                            <span class=" glyphicon glyphicon-heart"></span>
                                        </button>
                                        <button mat-icon-button color="accent">
                                            <span class=" glyphicon glyphicon-heart"></span>
                                        </button>
                                        <button mat-icon-button color="warn">
                                            <span class=" glyphicon glyphicon-heart"></span>
                                        </button>
                                        <button mat-icon-button disabled>
                                            <span class=" glyphicon glyphicon-heart"></span>
                                        </button>
                                    </div>
                                </div>
                                <div class="col-md-12 column">
                                    <h3>Fab Buttons</h3>
                                    <div class="button-row">
                                        <button mat-fab>Basic</button>
                                        <button mat-fab color="primary">Primary</button>
                                        <button mat-fab color="accent">Accent</button>
                                        <button mat-fab color="warn">Warn</button>
                                        <button mat-fab disabled>Disabled</button>
                                        <button mat-fab>
                                            <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
                                        </button>
                                        <a mat-fab routerLink=".">Link</a>
                                    </div>
                                </div>
                                <div class="col-md-12 column">
                                    <h3>Mini Fab Buttons</h3>
                                    <div class="button-row">
                                        <button mat-mini-fab>Basic</button>
                                        <button mat-mini-fab color="primary">Primary</button>
                                        <button mat-mini-fab color="accent">Accent</button>
                                        <button mat-mini-fab color="warn">Warn</button>
                                        <button mat-mini-fab disabled>Disabled</button>
                                        <button mat-mini-fab>
                                            <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
                                        </button>
                                        <a mat-mini-fab routerLink=".">Link</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row clearfix">
                            <div class="col-md-12 column">
                                <hr>
                            </div>
                        </div>
                        <div class="row clearfix">
                            <div class="col-md-4 column">
                                <div class="form-group">
                                    <label>单选</label>
                                    <mat-radio-group>
                                        <mat-radio-button value="0">不可用</mat-radio-button>
                                        <mat-radio-button value="1">可用</mat-radio-button>
                                    </mat-radio-group>
                                </div>
                            </div>
                        </div>
                        <div class="row clearfix">
                            <div class="col-md-4 column">
                                <div class="form-group">
                                    <label>Icon</label>
                                    <span class=" glyphicon glyphicon-heart"></span>
                                    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
                                </div>
                            </div>
                        </div>

                        <div class="row clearfix">
                            <div class="col-md-12 column">
                                <div class="form-group">
                                    <label>选择图片</label>
                                    <div>
                                        <button type="button" (click)="selectGoodsImage()" class="btn btn-success btn-sm">点击选择商品图片</button>
                                    </div>
                                    <app-img-cropper [showModal]="showModal" [aspectRatio]="1" (changeObj)="onShowModalChange($event)" (pictureObj)="pictureChange($event)"></app-img-cropper>
                                    <div class="goods-img" *ngIf="imageUrl">
                                        <img [src]="imageUrl">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row clearfix">
                            <div class="col-md-12 column">
                                <div class="form-group">
                                    <label>上传多图</label>
                                    <span class="red">&nbsp;&nbsp;请上传小于1M的图片</span>
                                    <app-file-uploader-multiple [imageFiles]="goodsBanners"></app-file-uploader-multiple>
                                </div>
                            </div>
                        </div>
                        <div class="row clearfix">
                            <div class="col-md-12 column">
                                <div class="form-group">
                                    <label>ckeditor</label>
                                    <ckeditor [(ngModel)]="goodsInfo.content" [ngModelOptions]="{standalone: true}"></ckeditor>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <button (click)="save()" type="button" class="btn btn-sm btn-success">
                            <i class="glyphicon glyphicon-save">保存</i>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>